<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>GoJS&reg; TreeLayout Class</title>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../../assets/js/bootstrap.min.js"></script>
    <script src="../../assets/js/highlight.js"></script>
    <script src="../../assets/js/api.js"></script>

    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >
    <!-- custom CSS after bootstrap -->
    <link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>
    <!--<link rel="stylesheet" href="../../assets/css/api.css" type="text/css" media="all" />-->
    <link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" />

    </head>

    <body>
    <!--
  <div id="topbar">
    <div id="topbar-inner">
      <ul>
        <li><a href="../../index.html">Home</a></li>
        <li><a href="../../learn/index.html">Learn</a></li>
        <li><a href="../../samples/index.html">Samples</a></li>
        <li><a href="../../intro/index.html">Intro</a></li>
        <li><a href="../index.html">API</a></li>
        <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
        <li><a href="../../doc/download.html">Download</a></li>
        <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
        <li><a href="https://www.nwoods.com/support/query.htm">Contact</a></li>
        <li class="buy"><a href="https://www.nwoods.com/sales/ordering.htm">Buy</a></li>
        <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
      </ul>
    </div>
  </div>
-->


  <!-- non-fixed navbar -->
    <nav id="api-nav" class="navbar navbar-inverse navbar-top">
      <div class="container">
        <div class="navbar-header" data-toggle="collapse" data-target="#navbar">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!--<a class="navbar-brand" href="#">GoJS</a>-->
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="../../index.html">Home</a></li>
            <li><a href="../../learn/index.html">Learn</a></li>
            <li><a href="../../samples/index.html">Samples</a></li>
            <li><a href="../../intro/index.html">Intro</a></li>
            <li><a href="../../api/index.html">API</a></li>
            <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
            <li><a href="../../doc/download.html">Download</a></li>
            <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
            <li><a href="https://www.nwoods.com/support/query.htm">Contact</a></li>
            <li class="buy"><a href="https://www.nwoods.com/sales/ordering.htm">Buy</a></li>
            <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>


    <div class="container-fluid" id="api-container">
    <div class="row">

<!-- ============================== classes index ============================ -->
     <div id="navindex" class="col-md-2">
        <!-- begin publish.classesIndex -->
        <!-- <div><a href="../index.html">GoJS Class Index</a></div> -->

<div class="sidebar-nav">
  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#DiagramNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Diagram Classes</span>
    </div>
    <div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        <li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
      
        <li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li>
      
        
      
        <li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li>
      
        <li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li>
      
        
      
        <li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li>
      
        <li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li>
      
        
      
        
      
        <li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li>
      
        <li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li>
      
        <li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li>
      
        <li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li>
      
        
      
        <li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li>
      
        
      
        
      
        <li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li>
      
        <li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li>
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li>
      
        
      
        <li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li>
      
        
      
        
      
        <li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#GeometryNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Geometry Classes</span>
    </div>
    <div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li>
      
        <li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li>
      
        
      
        
      
        <li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li>
      
        <li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li>
      
        <li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#ModelNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Model Classes</span>
    </div>
    <div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li>
      
        
      
        <li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li>
      
        
      
        
      
        <li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li>
      
        
      
        <li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li>
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#LayoutNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Layout Classes</span>
    </div>
    <div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li>
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li>
      
        
      
        <li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li>
      
        
      
        <li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li>
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#ToolNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Tool Classes</span>
    </div>
    <div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        <li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
      
        <li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
      
        
      
        <li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
      
        
      
        
      
        <li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
      
        <li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li>
      
        <li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
      
        <li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
      
        <li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
      
        <li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
      
        <li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li>
      
        <li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#CollectionNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Collection Classes</span>
    </div>
    <div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li>
      
        <li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/List.html" class="linkConstructor">List</a></li>
      
        <li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>
</div> <!-- /class="sidebar-nav -->




        <!-- end publish.classesIndex -->
    </div>

    <div id="contentBody" class="col-md-10">
    <!-- ============================== header ================================= -->
    <div id="header" class="fineprint mt30">
      <b>GoJS</b>&reg; Diagramming Components<br/>version 1.6.10 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>
    </div>

<!-- ============================== class title ============================ -->
            <h2 class="classTitle mt30">
                
                Class TreeLayout
                
            </h2>

<!-- ============================== class summary ========================== -->
      <span class="hideshowall">
        <span class="nodetails"><button id="buttonShow">Show Details</button></span>
        <span class="details"><button id="buttonHide">Show Summaries</button></span>
      </span>

            <p class="classsummary">
                
                <span class="extends"> Extends
                    <a href="../symbols/Layout.html" class="linkConstructor">Layout</a>.</span>
                

                This layout positions nodes of a tree-structured graph in layers (rows or columns).For a discussion and examples of the most commonly used properties, see <a href="../../intro/trees.html">Trees</a> page in the Introduction.There are many samples that use TreeLayout.If you want to experiment interactively with most of the properties, try the <a href="../../samples/tLayout.html">Tree Layout</a> sample.<p>This layout makes use of a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> of<a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>es and <a href="../symbols/TreeEdge.html" class="linkConstructor">TreeEdge</a>s that normallycorrespond to the <a href="../symbols/Node.html" class="linkConstructor">Node</a>s and <a href="../symbols/Link.html" class="linkConstructor">Link</a>s of the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>.<p>The most commonly set properties for controlling the results of a TreeLayout are:<ul><li><a href="../symbols/TreeLayout.html#angle" class="linkProperty">angle</a>: the direction in which the tree grows, from parent to child;    the default value of zero means that the tree grows towards the right, with the children of a node arranged in a layer that is a column.    An angle of 0 or 180 means that children form vertical layers -- breadth is height and depth is width;    an angle of 90 or 270 means that children form horizontal layers -- breadth is width and depth is height.</li><li><a href="../symbols/TreeLayout.html#layerSpacing" class="linkProperty">layerSpacing</a>: the distance between layers -- between a parent node and its child nodes.</li><li><a href="../symbols/TreeLayout.html#nodeSpacing" class="linkProperty">nodeSpacing</a>: the distance between nodes within a layer -- between siblings.</li><li><a href="../symbols/TreeLayout.html#alignment" class="linkProperty">alignment</a>: the relative position of a parent node with its children.</li><li><a href="../symbols/TreeLayout.html#sorting" class="linkProperty">sorting</a> and <a href="../symbols/TreeLayout.html#comparer" class="linkProperty">comparer</a>: specify the order of the immediate children of a parent node.</li><li><a href="../symbols/TreeLayout.html#compaction" class="linkProperty">compaction</a>: whether subtrees should be packed closer together if there is room.</li><li><a href="../symbols/TreeLayout.html#layerStyle" class="linkProperty">layerStyle</a>: whether the children of one node are aligned with the children of a sibling node.</li><li><a href="../symbols/TreeLayout.html#setsPortSpot" class="linkProperty">setsPortSpot</a>, <a href="../symbols/TreeLayout.html#portSpot" class="linkProperty">portSpot</a>, <a href="../symbols/TreeLayout.html#setsChildPortSpot" class="linkProperty">setsChildPortSpot</a>, and <a href="../symbols/TreeLayout.html#childPortSpot" class="linkProperty">childPortSpot</a>: this controls whether to set the <a href="../symbols/Link.html#fromSpot" class="linkProperty">Link.fromSpot</a> and <a href="../symbols/Link.html#toSpot" class="linkProperty">Link.toSpot</a> to be sensible for the <a href="../symbols/TreeLayout.html#angle" class="linkProperty">angle</a>.</li><li><a href="../symbols/TreeLayout.html#nodeIndent" class="linkProperty">nodeIndent</a> and <a href="../symbols/TreeLayout.html#nodeIndentPastParent" class="linkProperty">nodeIndentPastParent</a>: if the <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">alignment</a> is <a href="../symbols/TreeLayout.html#AlignmentStart" class="linkConstant">TreeLayout.AlignmentStart</a> or <a href="../symbols/TreeLayout.html#AlignmentEnd" class="linkConstant">TreeLayout.AlignmentEnd</a>, control how much extra space the first child is given when positioned.</li><li><a href="../symbols/TreeLayout.html#breadthLimit" class="linkProperty">breadthLimit</a>, <a href="../symbols/TreeLayout.html#rowSpacing" class="linkProperty">rowSpacing</a>: try to limit the total breadth of a subtree to a certain distance;    when there are too many children or when they are too broad, this puts children into additional rows (or columns, depending on the angle)    thereby limiting the breadth while increasing the depth of the tree.</li></ul><p>When you set one of the TreeLayout properties listed above, that property normally applies to all of the nodes in the tree.What if you want <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">alignment</a> to be <a href="../symbols/TreeLayout.html#AlignmentCenterChildren" class="linkConstant">TreeLayout.AlignmentCenterChildren</a> for the root node but <a href="../symbols/TreeLayout.html#AlignmentBus" class="linkConstant">TreeLayout.AlignmentBus</a> for the other nodes in the tree?Or what if you want want <a href="../symbols/TreeLayout.html#layerSpacing" class="linkProperty">layerSpacing</a> to be 50 for all layers except for the layer separating "leaf" nodes from their parent?<p>One common solution is to set <a href="../symbols/TreeLayout.html#treeStyle" class="linkProperty">treeStyle</a>.For the former scenario, you could set <a href="../symbols/TreeLayout.html#treeStyle" class="linkProperty">treeStyle</a> to <a href="../symbols/TreeLayout.html#StyleRootOnly" class="linkConstant">TreeLayout.StyleRootOnly</a>; the value of <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">alignment</a> would only apply to the root node.For the latter scenario, you could set it to <a href="../symbols/TreeLayout.html#StyleLastParents" class="linkConstant">TreeLayout.StyleLastParents</a>;the value of <a href="../symbols/TreeLayout.html#layerSpacing" class="linkProperty">layerSpacing</a> would apply to all nodes except those that have children but that do not have grandchildren.How do you then set the alignment or layerSpacing for the other nodes?By setting the TreeLayout properties whose names start with "alternate...".In these cases that would mean setting <a href="../symbols/TreeLayout.html#alternateAlignment" class="linkProperty">alternateAlignment</a> or <a href="../symbols/TreeLayout.html#alternateLayerSpacing" class="linkProperty">alternateLayerSpacing</a>.<p>These TreeLayout properties actually apply to the <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> that the TreeLayout uses to represent a <a href="../symbols/Node.html" class="linkConstructor">Node</a> within the TreeNetwork.All of those TreeLayout properties are actually stored in <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>; all of the "alternate..." properties are stored in <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>.Depending on the value of <a href="../symbols/TreeLayout.html#treeStyle" class="linkProperty">treeStyle</a>, the actual TreeVertex properties for each Node are copied appropriately from either rootDefaults or alternateDefaults.In the default case where treeStyle is <a href="../symbols/TreeLayout.html#StyleLayered" class="linkConstant">TreeLayout.StyleLayered</a>, the alternateDefaults are ignored.(Note that treeStyle, and a few other properties such as <a href="../symbols/TreeLayout.html#path" class="linkProperty">path</a> and <a href="../symbols/TreeLayout.html#arrangement" class="linkProperty">arrangement</a>, apply to the whole layout, not to an individual node/vertex.)<p>The use of <a href="../symbols/TreeLayout.html#treeStyle" class="linkProperty">treeStyle</a> and "alternate..." TreeLayout properties will cover a lot of common needs for tree layout customization.However, there may be times when that is not enough.Imagine a situation where you want a special <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> property value for a particular <a href="../symbols/Node.html" class="linkConstructor">Node</a>.The solution is to override <a href="../symbols/TreeLayout.html#assignTreeVertexValues" class="linkMethod">assignTreeVertexValues</a>, where you can examine the given <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>,including its corresponding <a href="../symbols/LayoutVertex.html#node" class="linkProperty">LayoutVertex.node</a>, to decide what TreeVertex property values should apply.
            </p>

<!-- ============================== constructor summary ==================== -->
            
        <h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
            <div class="table-responsive">
            <table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class TreeLayout.">
                <thead>
                        <tr>
                            <th scope="col" class="name">Name</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="name" >
                            <div class="name">
                                TreeLayout()
                            </div>
              </td>
              <td class="description">
                            <div class="description">
                            <!--newp--><p><p>Constructs a <a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a> with no <a href="../symbols/Layout.html#network" class="linkProperty">Layout.network</a>and with no owning <a href="../symbols/Layout.html#diagram" class="linkProperty">Layout.diagram</a>.
                        
                        


              </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div><!-- class="table-responsive">-->
            

<!-- ============================== properties summary ===================== -->
            
                
                
        <h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
        <div class="table-responsive">
        <table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class TreeLayout.">
                    <thead>
                        <tr>
                            <th scope="col" class="name">Name, Value Type</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                    
              <tr id="alignment" >
                
                <td class="name">
                  <div class="name">
                    alignment
                  </div>
                  <div class="attributes">
                    <span class="light">{EnumValue}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the default alignment of parents relative to their children.<span class="nodetails" id="xpropalignment"><a class="morelink" onclick="hst('propalignment')">More...</a></span> <span class="details" id="propalignment">Must be a static constant of <a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a> whose name starts with "Alignment".</span><div class="details" id="dpropalignment"><p>The default value is <a href="../symbols/TreeLayout.html#AlignmentCenterChildren" class="linkConstant">TreeLayout.AlignmentCenterChildren</a>.<p>This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateAlignment" >
                
                <td class="name">
                  <div class="name">
                    alternateAlignment
                  </div>
                  <div class="attributes">
                    <span class="light">{EnumValue}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the alternate alignment of parents relative to their children.<span class="nodetails" id="xpropalternateAlignment"><a class="morelink" onclick="hst('propalternateAlignment')">More...</a></span> <span class="details" id="propalternateAlignment">Must be a static constant of <a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a> whose name starts with "Alignment".</span><div class="details" id="dpropalternateAlignment"><p>The default value is <a href="../symbols/TreeLayout.html#AlignmentCenterChildren" class="linkConstant">TreeLayout.AlignmentCenterChildren</a>.<p>This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateAngle" >
                
                <td class="name">
                  <div class="name">
                    alternateAngle
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the alternate direction for tree growth.<span class="nodetails" id="xpropalternateAngle"><a class="morelink" onclick="hst('propalternateAngle')">More...</a></span> <span class="details" id="propalternateAngle"></span><div class="details" id="dpropalternateAngle"><p>The default value is 0; the value must be one of: 0, 90, 180, 270.<p>These values are in degrees, where 0 is along the positive X axis,and where 90 is along the positive Y axis.This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateBreadthLimit" >
                
                <td class="name">
                  <div class="name">
                    alternateBreadthLimit
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets an alternate limit on how broad a tree should be.<span class="nodetails" id="xpropalternateBreadthLimit"><a class="morelink" onclick="hst('propalternateBreadthLimit')">More...</a></span> <span class="details" id="propalternateBreadthLimit"></span><div class="details" id="dpropalternateBreadthLimit"><p>A value of zero (the default) means there is no limit;a positive value specifies a limit.The default value is zero.<p>This property is just a suggested constraint on howbroadly the tree will be laid out.When there isn't enough breadth for all of the children of a node, the children are placed in as many rows as needed to try to staywithin the given breadth limit.If the value is too small, since this layout algorithmdoes not modify the size or shape of any node, the nodes willjust be laid out in a line, one per row, and the breadth isdetermined by the broadest node.The distance between rows is specified by <a href="../symbols/TreeLayout.html#rowSpacing" class="linkProperty">rowSpacing</a>.To make room for the links that go around earlier rows to get tolater rows, when the alignment is not a "center" alignment, the<a href="../symbols/TreeLayout.html#rowIndent" class="linkProperty">rowIndent</a> property specifies that space at thestart of each row.This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateChildPortSpot" >
                
                <td class="name">
                  <div class="name">
                    alternateChildPortSpot
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Spot.html" class="linkConstructor">Spot</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the alternate spot that children nodes' ports get as their ToSpotThe default value is <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a>.<span class="nodetails" id="xpropalternateChildPortSpot"><a class="morelink" onclick="hst('propalternateChildPortSpot')">More...</a></span> <span class="details" id="propalternateChildPortSpot"></span><div class="details" id="dpropalternateChildPortSpot"><p>A value of <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a> will cause the TreeLayoutto assign a ToSpot based on the parent node's <a href="../symbols/TreeVertex.html#angle" class="linkProperty">TreeVertex.angle</a>.<p>If the value is other than NoSpot, it is just assigned.When <a href="../symbols/TreeLayout.html#path" class="linkProperty">path</a> is <a href="../symbols/TreeLayout.html#PathSource" class="linkConstant">PathSource</a>,the port's FromSpot is set instead of the ToSpot.This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateCommentMargin" >
                
                <td class="name">
                  <div class="name">
                    alternateCommentMargin
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the alternate distance between a node and its comments.<span class="nodetails" id="xpropalternateCommentMargin"><a class="morelink" onclick="hst('propalternateCommentMargin')">More...</a></span> <span class="details" id="propalternateCommentMargin"></span><div class="details" id="dpropalternateCommentMargin"><p>The default value is 20.<p>This is used by <a href="../symbols/TreeLayout.html#addComments" class="linkMethod">addComments</a> and <a href="../symbols/TreeLayout.html#layoutComments" class="linkMethod">layoutComments</a>.This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateCommentSpacing" >
                
                <td class="name">
                  <div class="name">
                    alternateCommentSpacing
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the alternate distance between comments.<span class="nodetails" id="xpropalternateCommentSpacing"><a class="morelink" onclick="hst('propalternateCommentSpacing')">More...</a></span> <span class="details" id="propalternateCommentSpacing"></span><div class="details" id="dpropalternateCommentSpacing"><p>The default value is 10.<p>This is used by <a href="../symbols/TreeLayout.html#addComments" class="linkMethod">addComments</a> and <a href="../symbols/TreeLayout.html#layoutComments" class="linkMethod">layoutComments</a>.This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateCompaction" >
                
                <td class="name">
                  <div class="name">
                    alternateCompaction
                  </div>
                  <div class="attributes">
                    <span class="light">{EnumValue}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets how closely to pack the child nodes of a subtree.<span class="nodetails" id="xpropalternateCompaction"><a class="morelink" onclick="hst('propalternateCompaction')">More...</a></span> <span class="details" id="propalternateCompaction">Must be either <a href="../symbols/TreeLayout.html#CompactionBlock" class="linkConstant">TreeLayout.CompactionBlock</a> or <a href="../symbols/TreeLayout.html#CompactionNone" class="linkConstant">TreeLayout.CompactionNone</a>.</span><div class="details" id="dpropalternateCompaction"><p>The default value is <a href="../symbols/TreeLayout.html#CompactionBlock" class="linkConstant">TreeLayout.CompactionBlock</a>.<p>This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateComparer" >
                
                <td class="name">
                  <div class="name">
                    alternateComparer
                  </div>
                  <div class="attributes">
                    <span class="light">{function(TreeVertex, TreeVertex):number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the alternate comparison function used for sorting the immediate children of a vertex.<span class="nodetails" id="xpropalternateComparer"><a class="morelink" onclick="hst('propalternateComparer')">More...</a></span> <span class="details" id="propalternateComparer"></span><div class="details" id="dpropalternateComparer"><p>The default comparer compares the <a href="../symbols/LayoutVertex.html#node" class="linkProperty">LayoutVertex.node</a> Text values.<p>This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.Whether this comparison function is used is determined by the value of <a href="../symbols/TreeLayout.html#alternateSorting" class="linkProperty">alternateSorting</a>.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateDefaults" >
                
                <td class="name">
                  <div class="name">
                    alternateDefaults
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the object holding the default values for alternate layer <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>es,used when the <a href="../symbols/TreeLayout.html#treeStyle" class="linkProperty">treeStyle</a> is <a href="../symbols/TreeLayout.html#StyleAlternating" class="linkConstant">StyleAlternating</a> or <a href="../symbols/TreeLayout.html#StyleLastParents" class="linkConstant">StyleLastParents</a>.<span class="nodetails" id="xpropalternateDefaults"><a class="morelink" onclick="hst('propalternateDefaults')">More...</a></span> <span class="details" id="propalternateDefaults"></span><div class="details" id="dpropalternateDefaults"><p>See the list of inheritable properties in the documentation for <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>.The other properties of this <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> are ignored.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateLayerSpacing" >
                
                <td class="name">
                  <div class="name">
                    alternateLayerSpacing
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the alternate distance between a parent node and its children.<span class="nodetails" id="xpropalternateLayerSpacing"><a class="morelink" onclick="hst('propalternateLayerSpacing')">More...</a></span> <span class="details" id="propalternateLayerSpacing"></span><div class="details" id="dpropalternateLayerSpacing"><p>The default value is 50.<p>This is the distance between a parent node and its first rowof children, in case there are multiple rows of its children.The <a href="../symbols/TreeLayout.html#rowSpacing" class="linkProperty">rowSpacing</a> property determines the distancebetween rows of children.Negative values may cause children to overlap with the parent.This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateLayerSpacingParentOverlap" >
                
                <td class="name">
                  <div class="name">
                    alternateLayerSpacingParentOverlap
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the alternate fraction of the node's depth for which the children's layer starts overlapped with the parent's layer.<span class="nodetails" id="xpropalternateLayerSpacingParentOverlap"><a class="morelink" onclick="hst('propalternateLayerSpacingParentOverlap')">More...</a></span> <span class="details" id="propalternateLayerSpacingParentOverlap"></span><div class="details" id="dpropalternateLayerSpacingParentOverlap"><p>The default value is 0.0 -- there is overlap between layers only if <a href="../symbols/TreeLayout.html#layerSpacing" class="linkProperty">layerSpacing</a> is negative.A value of 1.0 and a zero <a href="../symbols/TreeLayout.html#layerSpacing" class="linkProperty">layerSpacing</a> will cause child nodes to completely overlap the parent.<p>A value greater than zero may still cause overlap between layers,unless the value of <a href="../symbols/TreeLayout.html#layerSpacing" class="linkProperty">layerSpacing</a> is large enough.A value of zero might still allow overlap between layers,if <a href="../symbols/TreeLayout.html#layerSpacing" class="linkProperty">layerSpacing</a> is negative.This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateNodeIndent" >
                
                <td class="name">
                  <div class="name">
                    alternateNodeIndent
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the alternate indentation of the first child.<span class="nodetails" id="xpropalternateNodeIndent"><a class="morelink" onclick="hst('propalternateNodeIndent')">More...</a></span> <span class="details" id="propalternateNodeIndent"></span><div class="details" id="dpropalternateNodeIndent"><p>The default value is zero.  The value should be non-negative.<p>This property is only sensible when the <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">alignment</a>is <a href="../symbols/TreeLayout.html#AlignmentStart" class="linkConstant">AlignmentStart</a> or <a href="../symbols/TreeLayout.html#AlignmentEnd" class="linkConstant">AlignmentEnd</a>.Having a positive value is useful if you want to reserve spaceat the start of the row of children for some reason.For example, if you want to pretend the parent node is infinitely deep,you can set this to be the breadth of the parent node.This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateNodeIndentPastParent" >
                
                <td class="name">
                  <div class="name">
                    alternateNodeIndentPastParent
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the fraction of this node's breadth is added to <a href="../symbols/TreeLayout.html#nodeIndent" class="linkProperty">nodeIndent</a>to determine any spacing at the start of the children.<span class="nodetails" id="xpropalternateNodeIndentPastParent"><a class="morelink" onclick="hst('propalternateNodeIndentPastParent')">More...</a></span> <span class="details" id="propalternateNodeIndentPastParent"></span><div class="details" id="dpropalternateNodeIndentPastParent"><p>The default value is 0.0 -- the only indentation is specified by <a href="../symbols/TreeLayout.html#nodeIndent" class="linkProperty">nodeIndent</a>.When the value is 1.0, the children will be indented past the breadth of the parent node.<p>This property is only sensible when the <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">alignment</a>is <a href="../symbols/TreeLayout.html#AlignmentStart" class="linkConstant">AlignmentStart</a> or <a href="../symbols/TreeLayout.html#AlignmentEnd" class="linkConstant">AlignmentEnd</a>.This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateNodeSpacing" >
                
                <td class="name">
                  <div class="name">
                    alternateNodeSpacing
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the alternate distance between child nodes.<span class="nodetails" id="xpropalternateNodeSpacing"><a class="morelink" onclick="hst('propalternateNodeSpacing')">More...</a></span> <span class="details" id="propalternateNodeSpacing"></span><div class="details" id="dpropalternateNodeSpacing"><p>The default value is 20.<p>A negative value causes sibling nodes to overlap.This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternatePortSpot" >
                
                <td class="name">
                  <div class="name">
                    alternatePortSpot
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Spot.html" class="linkConstructor">Spot</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the alternate spot that this node's port gets as its FromSpot.<span class="nodetails" id="xpropalternatePortSpot"><a class="morelink" onclick="hst('propalternatePortSpot')">More...</a></span> <span class="details" id="propalternatePortSpot"></span><div class="details" id="dpropalternatePortSpot"><p>The default value is <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a>.<p>A value of <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a> will cause the TreeLayoutto assign a FromSpot based on the parent node's <a href="../symbols/TreeVertex.html#angle" class="linkProperty">TreeVertex.angle</a>.If the value is other than NoSpot, it is just assigned.When <a href="../symbols/TreeLayout.html#path" class="linkProperty">path</a> is <a href="../symbols/TreeLayout.html#PathSource" class="linkConstant">PathSource</a>,the port's ToSpot is set instead of the FromSpot.This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateRowIndent" >
                
                <td class="name">
                  <div class="name">
                    alternateRowIndent
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the alternate indentation of the first child of each row,if the <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">alignment</a> is not a "Center" alignment.<span class="nodetails" id="xpropalternateRowIndent"><a class="morelink" onclick="hst('propalternateRowIndent')">More...</a></span> <span class="details" id="propalternateRowIndent"></span><div class="details" id="dpropalternateRowIndent"><p>The default value is 10.  The value should be non-negative.<p>This is used to leave room for the links that connect a parent nodewith the child nodes that are in additional rows.This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateRowSpacing" >
                
                <td class="name">
                  <div class="name">
                    alternateRowSpacing
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the alternate distance between rows of children.<span class="nodetails" id="xpropalternateRowSpacing"><a class="morelink" onclick="hst('propalternateRowSpacing')">More...</a></span> <span class="details" id="propalternateRowSpacing"></span><div class="details" id="dpropalternateRowSpacing"><p>The default value is 25.<p>This property is only used when there is more than onerow of children for a given parent node.<a href="../symbols/TreeLayout.html#layerSpacing" class="linkProperty">layerSpacing</a> determines the distance betweenthe parent node and its first row of child nodes.This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateSetsChildPortSpot" >
                
                <td class="name">
                  <div class="name">
                    alternateSetsChildPortSpot
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether the TreeLayout should set theToSpot for each child node port.<span class="nodetails" id="xpropalternateSetsChildPortSpot"><a class="morelink" onclick="hst('propalternateSetsChildPortSpot')">More...</a></span> <span class="details" id="propalternateSetsChildPortSpot"></span><div class="details" id="dpropalternateSetsChildPortSpot"><p>The default value is true -- this may modify the spot of the ports of the children nodes,if the node has only a single port.<p>The spot used depends on the value of <a href="../symbols/TreeLayout.html#childPortSpot" class="linkProperty">childPortSpot</a>.This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateSetsPortSpot" >
                
                <td class="name">
                  <div class="name">
                    alternateSetsPortSpot
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether the TreeLayout should set theFromSpot for this parent node port.<span class="nodetails" id="xpropalternateSetsPortSpot"><a class="morelink" onclick="hst('propalternateSetsPortSpot')">More...</a></span> <span class="details" id="propalternateSetsPortSpot"></span><div class="details" id="dpropalternateSetsPortSpot"><p>The default value is true -- this may modify the spot of the port of this node, the parent,if the node has only a single port.<p>The spot used depends on the value of <a href="../symbols/TreeLayout.html#portSpot" class="linkProperty">portSpot</a>.This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="alternateSorting" >
                
                <td class="name">
                  <div class="name">
                    alternateSorting
                  </div>
                  <div class="attributes">
                    <span class="light">{EnumValue}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the alternate sorting policy for ordering the immediate children of a vertex.<span class="nodetails" id="xpropalternateSorting"><a class="morelink" onclick="hst('propalternateSorting')">More...</a></span> <span class="details" id="propalternateSorting">Must be <a href="../symbols/TreeLayout.html#SortingForwards" class="linkConstant">TreeLayout.SortingForwards</a>, <a href="../symbols/TreeLayout.html#SortingReverse" class="linkConstant">TreeLayout.SortingReverse</a>,<a href="../symbols/TreeLayout.html#SortingAscending" class="linkConstant">TreeLayout.SortingAscending</a>, or <a href="../symbols/TreeLayout.html#SortingDescending" class="linkConstant">TreeLayout.SortingDescending</a>.</span><div class="details" id="dpropalternateSorting"><p>The default value is <a href="../symbols/TreeLayout.html#SortingForwards" class="linkConstant">SortingForwards</a>.<p>This sets the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">alternateDefaults</a>' property of the same name.The sort order is determined by <a href="../symbols/TreeLayout.html#alternateComparer" class="linkProperty">alternateComparer</a>.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="angle" >
                
                <td class="name">
                  <div class="name">
                    angle
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the default direction for tree growth.<span class="nodetails" id="xpropangle"><a class="morelink" onclick="hst('propangle')">More...</a></span> <span class="details" id="propangle"></span><div class="details" id="dpropangle"><p>The default value is 0; the value must be one of: 0, 90, 180, 270.<p>These values are in degrees, where 0 is along the positive X axis,and where 90 is along the positive Y axis.This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="arrangement" >
                
                <td class="name">
                  <div class="name">
                    arrangement
                  </div>
                  <div class="attributes">
                    <span class="light">{EnumValue}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets how <a href="../symbols/TreeLayout.html#arrangeTrees" class="linkMethod">arrangeTrees</a> should lay out the separate trees.<span class="nodetails" id="xproparrangement"><a class="morelink" onclick="hst('proparrangement')">More...</a></span> <span class="details" id="proparrangement">Must be <a href="../symbols/TreeLayout.html#ArrangementVertical" class="linkConstant">TreeLayout.ArrangementVertical</a>, <a href="../symbols/TreeLayout.html#ArrangementHorizontal" class="linkConstant">TreeLayout.ArrangementHorizontal</a>,or <a href="../symbols/TreeLayout.html#ArrangementFixedRoots" class="linkConstant">TreeLayout.ArrangementFixedRoots</a>.</span><div class="details" id="dproparrangement"><p>The default value is <a href="../symbols/TreeLayout.html#ArrangementVertical" class="linkConstant">TreeLayout.ArrangementVertical</a></div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="arrangementSpacing" >
                
                <td class="name">
                  <div class="name">
                    arrangementSpacing
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Size.html" class="linkConstructor">Size</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the space between which <a href="../symbols/TreeLayout.html#arrangeTrees" class="linkMethod">arrangeTrees</a> will position the trees.<span class="nodetails" id="xproparrangementSpacing"><a class="morelink" onclick="hst('proparrangementSpacing')">More...</a></span> <span class="details" id="proparrangementSpacing"></span><div class="details" id="dproparrangementSpacing"><p>This defaults to the Size(10, 10).<p>This property is ignored if <a href="../symbols/TreeLayout.html#arrangement" class="linkProperty">arrangement</a> is <a href="../symbols/TreeLayout.html#ArrangementFixedRoots" class="linkConstant">TreeLayout.ArrangementFixedRoots</a>.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="breadthLimit" >
                
                <td class="name">
                  <div class="name">
                    breadthLimit
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets a limit on how broad a tree should be.<span class="nodetails" id="xpropbreadthLimit"><a class="morelink" onclick="hst('propbreadthLimit')">More...</a></span> <span class="details" id="propbreadthLimit"></span><div class="details" id="dpropbreadthLimit"><p>A value of zero (the default) means there is no limit;a positive value specifies a limit.The default value is zero.<p>This property is just a suggested constraint on howbroadly the tree will be laid out.When there isn't enough breadth for all of the children of a node, the children are placed in as many rows as needed to try to staywithin the given breadth limit.If the value is too small, since this layout algorithmdoes not modify the size or shape of any node, the nodes willjust be laid out in a line, one per row, and the breadth isdetermined by the broadest node.The distance between rows is specified by <a href="../symbols/TreeLayout.html#rowSpacing" class="linkProperty">rowSpacing</a>.To make room for the links that go around earlier rows to get tolater rows, when the alignment is not a "center" alignment, the<a href="../symbols/TreeLayout.html#rowIndent" class="linkProperty">rowIndent</a> property specifies that space at thestart of each row.This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="childPortSpot" >
                
                <td class="name">
                  <div class="name">
                    childPortSpot
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Spot.html" class="linkConstructor">Spot</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the spot that children nodes' ports get as their ToSpot.<span class="nodetails" id="xpropchildPortSpot"><a class="morelink" onclick="hst('propchildPortSpot')">More...</a></span> <span class="details" id="propchildPortSpot"></span><div class="details" id="dpropchildPortSpot"><p>The default value is <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a>.<p>A value of <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a> will cause the TreeLayoutto assign a ToSpot based on the parent node's <a href="../symbols/TreeVertex.html#angle" class="linkProperty">TreeVertex.angle</a>.If the value is other than NoSpot, it is just assigned.When <a href="../symbols/TreeLayout.html#path" class="linkProperty">path</a> is <a href="../symbols/TreeLayout.html#PathSource" class="linkConstant">PathSource</a>,the port's FromSpot is set instead of the ToSpot.This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="commentMargin" >
                
                <td class="name">
                  <div class="name">
                    commentMargin
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the distance between a node and its comments.<span class="nodetails" id="xpropcommentMargin"><a class="morelink" onclick="hst('propcommentMargin')">More...</a></span> <span class="details" id="propcommentMargin"></span><div class="details" id="dpropcommentMargin"><p>The default value is 20.<p>This is used by <a href="../symbols/TreeLayout.html#addComments" class="linkMethod">addComments</a> and <a href="../symbols/TreeLayout.html#layoutComments" class="linkMethod">layoutComments</a>.This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="comments" >
                
                <td class="name">
                  <div class="name">
                    comments
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                      <span class="since" title="since">1.3</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether this layout should find all <a href="../symbols/Node.html" class="linkConstructor">Node</a>swhose category is "Comment" andwhose anchors are nodes represented in the network,and increase the size of the corresponding TreeVertex to make room for the comment nodes.<span class="nodetails" id="xpropcomments"><a class="morelink" onclick="hst('propcomments')">More...</a></span> <span class="details" id="propcomments">The default value is true.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="commentSpacing" >
                
                <td class="name">
                  <div class="name">
                    commentSpacing
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the distance between comments.<span class="nodetails" id="xpropcommentSpacing"><a class="morelink" onclick="hst('propcommentSpacing')">More...</a></span> <span class="details" id="propcommentSpacing"></span><div class="details" id="dpropcommentSpacing"><p>The default value is 10.<p>This is used by <a href="../symbols/TreeLayout.html#addComments" class="linkMethod">addComments</a> and <a href="../symbols/TreeLayout.html#layoutComments" class="linkMethod">layoutComments</a>.This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="compaction" >
                
                <td class="name">
                  <div class="name">
                    compaction
                  </div>
                  <div class="attributes">
                    <span class="light">{EnumValue}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets how closely to pack the child nodes of a subtree.<span class="nodetails" id="xpropcompaction"><a class="morelink" onclick="hst('propcompaction')">More...</a></span> <span class="details" id="propcompaction">Must be either <a href="../symbols/TreeLayout.html#CompactionBlock" class="linkConstant">TreeLayout.CompactionBlock</a> or <a href="../symbols/TreeLayout.html#CompactionNone" class="linkConstant">TreeLayout.CompactionNone</a>.</span><div class="details" id="dpropcompaction"><p>The default value is <a href="../symbols/TreeLayout.html#CompactionBlock" class="linkConstant">CompactionBlock</a>.<p>This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="comparer" >
                
                <td class="name">
                  <div class="name">
                    comparer
                  </div>
                  <div class="attributes">
                    <span class="light">{function(TreeVertex, TreeVertex):number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the default comparison function used for sorting the immediate children of a vertex.<span class="nodetails" id="xpropcomparer"><a class="morelink" onclick="hst('propcomparer')">More...</a></span> <span class="details" id="propcomparer"></span><div class="details" id="dpropcomparer"><p>The default comparer compares the <a href="../symbols/LayoutVertex.html#node" class="linkProperty">LayoutVertex.node</a> Text values.<p>This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.Whether this comparison function is used is determined by the value of <a href="../symbols/TreeLayout.html#sorting" class="linkProperty">sorting</a>.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="layerSpacing" >
                
                <td class="name">
                  <div class="name">
                    layerSpacing
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the distance between a parent node and its children.<span class="nodetails" id="xproplayerSpacing"><a class="morelink" onclick="hst('proplayerSpacing')">More...</a></span> <span class="details" id="proplayerSpacing"></span><div class="details" id="dproplayerSpacing"><p>The default value is 50.<p>This is the distance between a parent node and its first rowof children, in case there are multiple rows of its children.The <a href="../symbols/TreeLayout.html#rowSpacing" class="linkProperty">rowSpacing</a> property determines the distancebetween rows of children.Negative values may cause children to overlap with the parent.This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="layerSpacingParentOverlap" >
                
                <td class="name">
                  <div class="name">
                    layerSpacingParentOverlap
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the fraction of the node's depth for which the children's layer starts overlapped with the parent's layer.<span class="nodetails" id="xproplayerSpacingParentOverlap"><a class="morelink" onclick="hst('proplayerSpacingParentOverlap')">More...</a></span> <span class="details" id="proplayerSpacingParentOverlap"></span><div class="details" id="dproplayerSpacingParentOverlap"><p>The default value is 0.0 -- there is overlap between layers only if <a href="../symbols/TreeLayout.html#layerSpacing" class="linkProperty">layerSpacing</a> is negative.A value of 1.0 and a zero <a href="../symbols/TreeLayout.html#layerSpacing" class="linkProperty">layerSpacing</a> will cause child nodes to completely overlap the parent.<p>A value greater than zero may still cause overlap between layers,unless the value of <a href="../symbols/TreeLayout.html#layerSpacing" class="linkProperty">layerSpacing</a> is large enough.A value of zero might still allow overlap between layers,if <a href="../symbols/TreeLayout.html#layerSpacing" class="linkProperty">layerSpacing</a> is negative.This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="layerStyle" >
                
                <td class="name">
                  <div class="name">
                    layerStyle
                  </div>
                  <div class="attributes">
                    <span class="light">{EnumValue}</span>
                    
                      <span class="since" title="since">1.4</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the manner in which the nodes are aligned in layers.<span class="nodetails" id="xproplayerStyle"><a class="morelink" onclick="hst('proplayerStyle')">More...</a></span> <span class="details" id="proplayerStyle">Must be <a href="../symbols/TreeLayout.html#LayerIndividual" class="linkConstant">TreeLayout.LayerIndividual</a>, <a href="../symbols/TreeLayout.html#LayerSiblings" class="linkConstant">TreeLayout.LayerSiblings</a>,or <a href="../symbols/TreeLayout.html#LayerUniform" class="linkConstant">TreeLayout.LayerUniform</a>.</span><div class="details" id="dproplayerStyle"><p>The default value is <a href="../symbols/TreeLayout.html#LayerIndividual" class="linkConstant">TreeLayout.LayerIndividual</a>.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="nodeIndent" >
                
                <td class="name">
                  <div class="name">
                    nodeIndent
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the default indentation of the first child.<span class="nodetails" id="xpropnodeIndent"><a class="morelink" onclick="hst('propnodeIndent')">More...</a></span> <span class="details" id="propnodeIndent"></span><div class="details" id="dpropnodeIndent"><p>The default value is zero.  The value should be non-negative.<p>This property is only sensible when the <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">alignment</a>is <a href="../symbols/TreeLayout.html#AlignmentStart" class="linkConstant">AlignmentStart</a> or <a href="../symbols/TreeLayout.html#AlignmentEnd" class="linkConstant">AlignmentEnd</a>.Having a positive value is useful if you want to reserve spaceat the start of the row of children for some reason.For example, if you want to pretend the parent node is infinitely deep,you can set this to be the breadth of the parent node.This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="nodeIndentPastParent" >
                
                <td class="name">
                  <div class="name">
                    nodeIndentPastParent
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the fraction of this node's breadth is added to <a href="../symbols/TreeLayout.html#nodeIndent" class="linkProperty">nodeIndent</a>to determine any spacing at the start of the children.<span class="nodetails" id="xpropnodeIndentPastParent"><a class="morelink" onclick="hst('propnodeIndentPastParent')">More...</a></span> <span class="details" id="propnodeIndentPastParent"></span><div class="details" id="dpropnodeIndentPastParent"><p>The default value is 0.0 -- the only indentation is specified by <a href="../symbols/TreeLayout.html#nodeIndent" class="linkProperty">nodeIndent</a>.When the value is 1.0, the children will be indented past the breadth of the parent node.<p>This property is only sensible when the <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">alignment</a>is <a href="../symbols/TreeLayout.html#AlignmentStart" class="linkConstant">AlignmentStart</a> or <a href="../symbols/TreeLayout.html#AlignmentEnd" class="linkConstant">AlignmentEnd</a>.This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="nodeSpacing" >
                
                <td class="name">
                  <div class="name">
                    nodeSpacing
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the distance between child nodes.<span class="nodetails" id="xpropnodeSpacing"><a class="morelink" onclick="hst('propnodeSpacing')">More...</a></span> <span class="details" id="propnodeSpacing"></span><div class="details" id="dpropnodeSpacing"><p>The default value is 20.<p>A negative value causes sibling nodes to overlap.This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="path" >
                
                <td class="name">
                  <div class="name">
                    path
                  </div>
                  <div class="attributes">
                    <span class="light">{EnumValue}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets how the tree should be constructed from the<a href="../symbols/TreeEdge.html" class="linkConstructor">TreeEdge</a>s connecting <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>es.<span class="nodetails" id="xproppath"><a class="morelink" onclick="hst('proppath')">More...</a></span> <span class="details" id="proppath">Must be <a href="../symbols/TreeLayout.html#PathDestination" class="linkConstant">TreeLayout.PathDestination</a> or <a href="../symbols/TreeLayout.html#PathSource" class="linkConstant">TreeLayout.PathSource</a> or <a href="../symbols/TreeLayout.html#PathDefault" class="linkConstant">TreeLayout.PathDefault</a>.</span><div class="details" id="dproppath"><p>The default value is <a href="../symbols/TreeLayout.html#PathDefault" class="linkConstant">TreeLayout.PathDefault</a>,where the value of <a href="../symbols/Diagram.html#isTreePathToChildren" class="linkProperty">Diagram.isTreePathToChildren</a> determines the effective value of this property.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="portSpot" >
                
                <td class="name">
                  <div class="name">
                    portSpot
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Spot.html" class="linkConstructor">Spot</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the spot that this node's port gets as its FromSpot.<span class="nodetails" id="xpropportSpot"><a class="morelink" onclick="hst('propportSpot')">More...</a></span> <span class="details" id="propportSpot"></span><div class="details" id="dpropportSpot"><p>The default value is <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a>.<p>A value of <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a> will cause the TreeLayoutto assign a FromSpot based on the parent node's <a href="../symbols/TreeVertex.html#angle" class="linkProperty">TreeVertex.angle</a>.If the value is other than NoSpot, it is just assigned.When <a href="../symbols/TreeLayout.html#path" class="linkProperty">path</a> is <a href="../symbols/TreeLayout.html#PathSource" class="linkConstant">PathSource</a>,the port's ToSpot is set instead of the FromSpot.This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="rootDefaults" >
                
                <td class="name">
                  <div class="name">
                    rootDefaults
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the object holding the default values for root <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>es.<span class="nodetails" id="xproprootDefaults"><a class="morelink" onclick="hst('proprootDefaults')">More...</a></span> <span class="details" id="proprootDefaults"></span><div class="details" id="dproprootDefaults"><p>The values for the following inheritable properties are actually stored in this object:<a href="../symbols/TreeLayout.html#sorting" class="linkProperty">sorting</a>, <a href="../symbols/TreeLayout.html#comparer" class="linkProperty">comparer</a>, <a href="../symbols/TreeLayout.html#angle" class="linkProperty">angle</a>,<a href="../symbols/TreeLayout.html#alignment" class="linkProperty">alignment</a>, <a href="../symbols/TreeLayout.html#nodeIndent" class="linkProperty">nodeIndent</a>, <a href="../symbols/TreeLayout.html#nodeIndentPastParent" class="linkProperty">nodeIndentPastParent</a>,<a href="../symbols/TreeLayout.html#nodeSpacing" class="linkProperty">nodeSpacing</a>, <a href="../symbols/TreeLayout.html#layerSpacing" class="linkProperty">layerSpacing</a>, <a href="../symbols/TreeLayout.html#layerSpacingParentOverlap" class="linkProperty">layerSpacingParentOverlap</a>,<a href="../symbols/TreeLayout.html#compaction" class="linkProperty">compaction</a>, <a href="../symbols/TreeLayout.html#breadthLimit" class="linkProperty">breadthLimit</a>, <a href="../symbols/TreeLayout.html#rowSpacing" class="linkProperty">rowSpacing</a>, <a href="../symbols/TreeLayout.html#rowIndent" class="linkProperty">rowIndent</a>,<a href="../symbols/TreeLayout.html#commentSpacing" class="linkProperty">commentSpacing</a>, <a href="../symbols/TreeLayout.html#commentMargin" class="linkProperty">commentMargin</a>,<a href="../symbols/TreeLayout.html#setsPortSpot" class="linkProperty">setsPortSpot</a>, <a href="../symbols/TreeLayout.html#portSpot" class="linkProperty">portSpot</a>, <a href="../symbols/TreeLayout.html#setsChildPortSpot" class="linkProperty">setsChildPortSpot</a>, <a href="../symbols/TreeLayout.html#childPortSpot" class="linkProperty">childPortSpot</a>.The other properties of this <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> are ignored.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="roots" >
                
                <td class="name">
                  <div class="name">
                    roots
                  </div>
                  <div class="attributes">
                    <span class="light">{Set.<(TreeVertex|Node)>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the collection of root vertexes.<span class="nodetails" id="xproproots"><a class="morelink" onclick="hst('proproots')">More...</a></span> <span class="details" id="proproots"></span><div class="details" id="dproproots"><p>Initially this will be an empty <a href="../symbols/Set.html" class="linkConstructor">Set</a>.<p>If the <a href="../symbols/TreeLayout.html#path" class="linkProperty">path</a> is either PathDestination orPathSource, this layout can easilydetermine all of the tree roots by searching the whole network.Otherwise, you should explicitly initialize this collectionwith one or more <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>es.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="rowIndent" >
                
                <td class="name">
                  <div class="name">
                    rowIndent
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the default indentation of the first child of each row,if the <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">alignment</a> is not a "Center" alignment.<span class="nodetails" id="xproprowIndent"><a class="morelink" onclick="hst('proprowIndent')">More...</a></span> <span class="details" id="proprowIndent"></span><div class="details" id="dproprowIndent"><p>The default value is 10.  The value should be non-negative.<p>This is used to leave room for the links that connect a parent nodewith the child nodes that are in additional rows.This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="rowSpacing" >
                
                <td class="name">
                  <div class="name">
                    rowSpacing
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the distance between rows of children.<span class="nodetails" id="xproprowSpacing"><a class="morelink" onclick="hst('proprowSpacing')">More...</a></span> <span class="details" id="proprowSpacing"></span><div class="details" id="dproprowSpacing"><p>The default value is 25.<p>This property is only used when there is more than onerow of children for a given parent node.<a href="../symbols/TreeLayout.html#layerSpacing" class="linkProperty">layerSpacing</a> determines the distance betweenthe parent node and its first row of child nodes.This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="setsChildPortSpot" >
                
                <td class="name">
                  <div class="name">
                    setsChildPortSpot
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether the TreeLayout should set theToSpot for each child node port.<span class="nodetails" id="xpropsetsChildPortSpot"><a class="morelink" onclick="hst('propsetsChildPortSpot')">More...</a></span> <span class="details" id="propsetsChildPortSpot"></span><div class="details" id="dpropsetsChildPortSpot"><p>The default value is true -- this may modify the spot of the ports of the children nodes,if the node has only a single port.<p>The spot used depends on the value of <a href="../symbols/TreeLayout.html#childPortSpot" class="linkProperty">childPortSpot</a>.This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="setsPortSpot" >
                
                <td class="name">
                  <div class="name">
                    setsPortSpot
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether the TreeLayout should set theFromSpot for this parent node port.<span class="nodetails" id="xpropsetsPortSpot"><a class="morelink" onclick="hst('propsetsPortSpot')">More...</a></span> <span class="details" id="propsetsPortSpot"></span><div class="details" id="dpropsetsPortSpot"><p>The default value is true -- this may modify the spot of the port of this node, the parent,if the node has only a single port.<p>The spot used depends on the value of <a href="../symbols/TreeLayout.html#portSpot" class="linkProperty">portSpot</a>.This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="sorting" >
                
                <td class="name">
                  <div class="name">
                    sorting
                  </div>
                  <div class="attributes">
                    <span class="light">{EnumValue}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the default sorting policy for ordering the immediate children of a vertex.<span class="nodetails" id="xpropsorting"><a class="morelink" onclick="hst('propsorting')">More...</a></span> <span class="details" id="propsorting">Must be <a href="../symbols/TreeLayout.html#SortingForwards" class="linkConstant">TreeLayout.SortingForwards</a>, <a href="../symbols/TreeLayout.html#SortingReverse" class="linkConstant">TreeLayout.SortingReverse</a>,<a href="../symbols/TreeLayout.html#SortingAscending" class="linkConstant">TreeLayout.SortingAscending</a>, or <a href="../symbols/TreeLayout.html#SortingDescending" class="linkConstant">TreeLayout.SortingDescending</a>.</span><div class="details" id="dpropsorting"><p>The default value is <a href="../symbols/TreeLayout.html#SortingForwards" class="linkConstant">TreeLayout.SortingForwards</a>.<p>This sets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">rootDefaults</a>' property of the same name.The sort order is determined by <a href="../symbols/TreeLayout.html#comparer" class="linkProperty">comparer</a>.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="treeStyle" >
                
                <td class="name">
                  <div class="name">
                    treeStyle
                  </div>
                  <div class="attributes">
                    <span class="light">{EnumValue}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the Style for the resulting trees.<span class="nodetails" id="xproptreeStyle"><a class="morelink" onclick="hst('proptreeStyle')">More...</a></span> <span class="details" id="proptreeStyle">Must be <a href="../symbols/TreeLayout.html#StyleLayered" class="linkConstant">TreeLayout.StyleLayered</a>, <a href="../symbols/TreeLayout.html#StyleAlternating" class="linkConstant">TreeLayout.StyleAlternating</a>,<a href="../symbols/TreeLayout.html#StyleLastParents" class="linkConstant">TreeLayout.StyleLastParents</a>, or <a href="../symbols/TreeLayout.html#StyleRootOnly" class="linkConstant">TreeLayout.StyleRootOnly</a>.</span><div class="details" id="dproptreeStyle"><p>The default value is <a href="../symbols/TreeLayout.html#StyleLayered" class="linkConstant">TreeLayout.StyleLayered</a>.</div>
                
                </div>
                            </td>
                        </tr>
                    
                    </tbody>
                </table>
                </div><!-- class="table-responsive">-->
                

                
                <dl class="inheritsList">
                <dt>Properties borrowed from class <a href="../symbols/Layout.html" class="linkConstructor">Layout</a>: </dt><dd><a href="../symbols/Layout.html#arrangementOrigin" class="linkProperty">arrangementOrigin</a>, <a href="../symbols/Layout.html#diagram" class="linkProperty">diagram</a>, <a href="../symbols/Layout.html#group" class="linkProperty">group</a>, <a href="../symbols/Layout.html#isInitial" class="linkProperty">isInitial</a>, <a href="../symbols/Layout.html#isOngoing" class="linkProperty">isOngoing</a>, <a href="../symbols/Layout.html#isRealtime" class="linkProperty">isRealtime</a>, <a href="../symbols/Layout.html#isRouting" class="linkProperty">isRouting</a>, <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a>, <a href="../symbols/Layout.html#isViewportSized" class="linkProperty">isViewportSized</a>, <a href="../symbols/Layout.html#network" class="linkProperty">network</a></dd>
                </dl>
                
            

<!-- ============================== methods summary ======================== -->
            
                
                
        <h2 class="summaryCaption">Method <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
                <div class="table-responsive">
                <table class="summaryTable table table-bordered table-condensed" summary="A summary of the methods documented in the class TreeLayout.">
                    <thead>
                        <tr>
                            <th scope="col" class="name">Name, Return Type</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                    
            <tr id="addComments">
                <td class="name">
                  
                  <div class="name">
                    addComments(v)
                  </div>
                  <div class="attributes">
                    
                    
                      <span class="since" title="since">1.2</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Find any associated objects to be positioned along with the <a href="../symbols/LayoutVertex.html#node" class="linkProperty">LayoutVertex.node</a>.<span class="nodetails" id="xmethaddComments"><a class="morelink" onclick="hst('methaddComments')">More...</a></span> <span class="details" id="methaddComments"></span><div class="details" id="dmethaddComments"><p>This looks for visible <a href="../symbols/Node.html" class="linkConstructor">Node</a>'s whose category is "Comment" andthat refer to the tree vertex's <a href="../symbols/Node.html" class="linkConstructor">Node</a>.This method is only called when <a href="../symbols/TreeLayout.html#comments" class="linkProperty">comments</a> is true.<p>You may want to override this method in order to customize howany associated objects are found and how the node's <a href="../symbols/LayoutVertex.html#bounds" class="linkProperty">LayoutVertex.bounds</a>are set to reserve space for those associated objects.This method should not walk the tree, since it is called for each<a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> in an indeterminate order.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>}</span> <b>v</b>
                                          
                                      </dt>
                                      <dd></dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="arrangeTrees">
                <td class="name">
                  
                  <div class="name">
                    arrangeTrees()
                  </div>
                  <div class="attributes">
                    
                    
                      <span class="since" title="since">1.2</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Position each separate tree.<span class="nodetails" id="xmetharrangeTrees"><a class="morelink" onclick="hst('metharrangeTrees')">More...</a></span> <span class="details" id="metharrangeTrees"></span><div class="details" id="dmetharrangeTrees"><p>This is called after each tree has been laid out and thus each subtreebounds are known.The <a href="../symbols/TreeLayout.html#arrangement" class="linkProperty">arrangement</a> and <a href="../symbols/TreeLayout.html#arrangementSpacing" class="linkProperty">arrangementSpacing</a> and <a href="../symbols/Layout.html#arrangementOrigin" class="linkProperty">Layout.arrangementOrigin</a>properties affect this method's behavior.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="assignTreeVertexValues">
                <td class="name">
                  
                  <div class="name">
                    assignTreeVertexValues(v)
                  </div>
                  <div class="attributes">
                    
                    
                      <span class="since" title="since">1.1</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Assign final property values for a <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>.<span class="nodetails" id="xmethassignTreeVertexValues"><a class="morelink" onclick="hst('methassignTreeVertexValues')">More...</a></span> <span class="details" id="methassignTreeVertexValues"></span><div class="details" id="dmethassignTreeVertexValues"><p>This method is commonly overridden in order to providetree layout properties for particular nodes.This method is called after values have been inherited from other<a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>es, so you can examine and modify thevalues of related tree nodes.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.<p>However, when <a href="../symbols/TreeVertex.html#alignment" class="linkProperty">TreeVertex.alignment</a> is <a href="../symbols/TreeLayout.html#AlignmentBusBranching" class="linkConstant">TreeLayout.AlignmentBusBranching</a>,changing the <a href="../symbols/TreeVertex.html#sorting" class="linkProperty">TreeVertex.sorting</a> or<a href="../symbols/TreeVertex.html#comparer" class="linkProperty">TreeVertex.comparer</a> properties in this method will have no effect.<p>This method should not walk the tree, since it is called for each<a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> in a depth-first manner starting at a root.<p>Here is an example where the children are squeezed together if there are many of them,but only on nodes that have no grandchildren.  This makes use of two <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>properties that are automatically computed for you, <a href="../symbols/TreeVertex.html#childrenCount" class="linkProperty">TreeVertex.childrenCount</a> and <a href="../symbols/TreeVertex.html#descendantCount" class="linkProperty">TreeVertex.descendantCount</a>.<pre>  function SqueezingTreeLayout() {    go.TreeLayout.call(this);  }  go.Diagram.inherit(SqueezingTreeLayout, go.TreeLayout);  SqueezingTreeLayout.prototype.assignTreeVertexValues = function(v) {    if (v.childrenCount > 6 && v.childrenCount === v.descendantCount) {      v.alignment = go.TreeLayout.AlignmentBottomRightBus;      v.layerSpacing = 10;      v.rowSpacing = 0;    }  };</pre><p>If you need to assign TreeVertex values and also have them be "inherited" by the child vertexes,you should override <a href="../symbols/TreeLayout.html#initializeTreeVertexValues" class="linkMethod">initializeTreeVertexValues</a> instead.However at the time that method is called, the computed properties of TreeVertex will not be available.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>}</span> <b>v</b>
                                          
                                      </dt>
                                      <dd></dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="commitLayers">
                <td class="name">
                  
                  <div class="name">
                    commitLayers(layerRects, offset)
                  </div>
                  <div class="attributes">
                    
                    
                      <span class="since" title="since">1.4</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This overridable method is called by <a href="../symbols/TreeLayout.html#commitLayout" class="linkMethod">commitLayout</a>if <a href="../symbols/TreeLayout.html#layerStyle" class="linkProperty">layerStyle</a> is LayerUniformto support custom arrangement of bands or labels across each layout layer.<span class="nodetails" id="xmethcommitLayers"><a class="morelink" onclick="hst('methcommitLayers')">More...</a></span> <span class="details" id="methcommitLayers">By default this method does nothing.</span><div class="details" id="dmethcommitLayers"><p>The coordinates used in the resulting Rects may need to be offset by the <a href="../symbols/Layout.html#arrangementOrigin" class="linkProperty">Layout.arrangementOrigin</a>and/or by the arrangement of subtrees done by <a href="../symbols/TreeLayout.html#arrangeTrees" class="linkMethod">arrangeTrees</a>.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Array.<Rect>}</span> <b>layerRects</b>
                                          
                                      </dt>
                                      <dd>an Array of <a href="../symbols/Rect.html" class="linkConstructor">Rect</a>s with the bounds of each of the "layers"</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span> <b>offset</b>
                                          
                                      </dt>
                                      <dd>the position of the top-left corner of the banded area relative to the coordinates given by the layerRects</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="commitLayout">
                <td class="name">
                  
                  <div class="name">
                    commitLayout()
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Set the fromSpot and toSpot on each Link, position each Node accordingto the vertex position, and then position/route the Links.<span class="nodetails" id="xmethcommitLayout"><a class="morelink" onclick="hst('methcommitLayout')">More...</a></span> <span class="details" id="methcommitLayout"></span><div class="details" id="dmethcommitLayout"><p>This calls the <a href="../symbols/TreeLayout.html#commitNodes" class="linkMethod">commitNodes</a> and <a href="../symbols/TreeLayout.html#commitLinks" class="linkMethod">commitLinks</a> methods, the latter only if <a href="../symbols/Layout.html#isRouting" class="linkProperty">isRouting</a> is true.You should not call this method -- it is a "protected virtual" method.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="commitLinks">
                <td class="name">
                  
                  <div class="name">
                    commitLinks()
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Routes the links.<span class="nodetails" id="xmethcommitLinks"><a class="morelink" onclick="hst('methcommitLinks')">More...</a></span> <span class="details" id="methcommitLinks"></span><div class="details" id="dmethcommitLinks"><p>This is called by <a href="../symbols/TreeLayout.html#commitLayout" class="linkMethod">commitLayout</a>.This is only called if <a href="../symbols/Layout.html#isRouting" class="linkProperty">Layout.isRouting</a> is true.See also <a href="../symbols/TreeLayout.html#commitNodes" class="linkMethod">commitNodes</a>.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="commitNodes">
                <td class="name">
                  
                  <div class="name">
                    commitNodes()
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Commit the position of all nodes.<span class="nodetails" id="xmethcommitNodes"><a class="morelink" onclick="hst('methcommitNodes')">More...</a></span> <span class="details" id="methcommitNodes"></span><div class="details" id="dmethcommitNodes"><p>This is called by <a href="../symbols/TreeLayout.html#commitLayout" class="linkMethod">commitLayout</a>.See also <a href="../symbols/TreeLayout.html#commitLinks" class="linkMethod">commitLinks</a>.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="createNetwork">
                <td class="name">
                  
                  <div class="name">
                    createNetwork()
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Create a new <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> of <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>es and <a href="../symbols/TreeEdge.html" class="linkConstructor">TreeEdge</a>s.
                 
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>}</span> a new <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>.</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="doLayout">
                <td class="name">
                  
                  <div class="name">
                    doLayout(coll)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Perform the tree layout.<span class="nodetails" id="xmethdoLayout"><a class="morelink" onclick="hst('methdoLayout')">More...</a></span> <span class="details" id="methdoLayout"></span><div class="details" id="dmethdoLayout"><p>If there is no <a href="../symbols/Layout.html#network" class="linkProperty">Layout.network</a>, this calls <a href="../symbols/TreeLayout.html#makeNetwork" class="linkMethod">makeNetwork</a> to create a TreeNetwork from the given collection of Parts.<p>If there are no <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> <a href="../symbols/TreeLayout.html#roots" class="linkProperty">roots</a> specified, this finds all roots in the <a href="../symbols/Layout.html#network" class="linkProperty">Layout.network</a>.<p>This initializes all of the <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>es and <a href="../symbols/TreeEdge.html" class="linkConstructor">TreeEdge</a>s, calling <a href="../symbols/TreeLayout.html#initializeTreeVertexValues" class="linkMethod">initializeTreeVertexValues</a> on each vertex,supporting inheritance of vertex values.Then it calls <a href="../symbols/TreeLayout.html#assignTreeVertexValues" class="linkMethod">assignTreeVertexValues</a> on each one, to allow for node/vertex-specific customizations.Next it sorts all of the child vertexes for each parent vertex, if needed.<p>This also calls <a href="../symbols/TreeLayout.html#addComments" class="linkMethod">addComments</a> of each vertex, in order to find any comment nodes associated with each vertex,so that they can be accommodated by the layout.<p>This then actually does the "layout" of the vertexes and optionally the routing of the edges of each tree in the network.To deal with multiple roots/trees this also calls <a href="../symbols/TreeLayout.html#arrangeTrees" class="linkMethod">arrangeTrees</a> to position each separate tree relative to each other.<p>Finally this calls <a href="../symbols/Layout.html#updateParts" class="linkMethod">Layout.updateParts</a> to commit the Node positions from the vertex positions and the Link routes from the edges.<a href="../symbols/Layout.html#updateParts" class="linkMethod">Layout.updateParts</a> calls <a href="../symbols/TreeLayout.html#commitLayout" class="linkMethod">commitLayout</a> within a transaction.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>|<a href="../symbols/Group.html" class="linkConstructor">Group</a>|Iterable.<Part>}</span> <b>coll</b>
                                          
                                      </dt>
                                      <dd>A <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> or a <a href="../symbols/Group.html" class="linkConstructor">Group</a> or a collection of <a href="../symbols/Part.html" class="linkConstructor">Part</a>s.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="initializeTreeVertexValues">
                <td class="name">
                  
                  <div class="name">
                    initializeTreeVertexValues(v)
                  </div>
                  <div class="attributes">
                    
                    
                      <span class="since" title="since">1.2</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Assign initial property values for a <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>.<span class="nodetails" id="xmethinitializeTreeVertexValues"><a class="morelink" onclick="hst('methinitializeTreeVertexValues')">More...</a></span> <span class="details" id="methinitializeTreeVertexValues"></span><div class="details" id="dmethinitializeTreeVertexValues"><p>The values may be inherited, so this method is called whilepropagating values from the root nodes.This method should not walk the tree, since it is called for each<a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> in a depth-first manner starting at a root.<p>You probably do not need to override this method,but if you do you should call first either the base methodor <a href="../symbols/TreeVertex.html#copyInheritedPropertiesFrom" class="linkMethod">TreeVertex.copyInheritedPropertiesFrom</a>, since theyassign most of the <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> property valuesused to influence the layout.Informational properties such as <a href="../symbols/TreeVertex.html#descendantCount" class="linkProperty">TreeVertex.descendantCount</a>and <a href="../symbols/TreeVertex.html#maxGenerationCount" class="linkProperty">TreeVertex.maxGenerationCount</a> will not yet have been initializedby the time this method is called.It is more common to override <a href="../symbols/TreeLayout.html#assignTreeVertexValues" class="linkMethod">assignTreeVertexValues</a> in order tomodify a property or two to customize the layout at that node.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.<p>When the <a href="../symbols/TreeVertex.html#alignment" class="linkProperty">TreeVertex.alignment</a> is <a href="../symbols/TreeLayout.html#AlignmentBusBranching" class="linkConstant">TreeLayout.AlignmentBusBranching</a>,this will modify the <a href="../symbols/TreeVertex.html#angle" class="linkProperty">TreeVertex.angle</a> appropriately depending on whichside of the bus the vertex is on.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>}</span> <b>v</b>
                                          
                                      </dt>
                                      <dd></dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="layoutComments">
                <td class="name">
                  
                  <div class="name">
                    layoutComments(v)
                  </div>
                  <div class="attributes">
                    
                    
                      <span class="since" title="since">1.2</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Position and <a href="../symbols/TreeVertex.html#comments" class="linkProperty">TreeVertex.comments</a> around the vertex.<span class="nodetails" id="xmethlayoutComments"><a class="morelink" onclick="hst('methlayoutComments')">More...</a></span> <span class="details" id="methlayoutComments"></span><div class="details" id="dmethlayoutComments"><p>This method should not walk the tree, since it is called for each<a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> in an indeterminate order.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>}</span> <b>v</b>
                                          
                                      </dt>
                                      <dd></dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="makeNetwork">
                <td class="name">
                  
                  <div class="name">
                    makeNetwork(coll)
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Create and initialize a TreeNetwork with the given nodes and links.<span class="nodetails" id="xmethmakeNetwork"><a class="morelink" onclick="hst('methmakeNetwork')">More...</a></span> <span class="details" id="methmakeNetwork"></span><div class="details" id="dmethmakeNetwork"><p>This does not include any nodes of category "Comment".Comment nodes are added by the <a href="../symbols/TreeLayout.html#addComments" class="linkMethod">addComments</a> method.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>|<a href="../symbols/Group.html" class="linkConstructor">Group</a>|Iterable.<Part>}</span> <b>coll</b>
                                          
                                      </dt>
                                      <dd>A <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> or a <a href="../symbols/Group.html" class="linkConstructor">Group</a> or a collection of <a href="../symbols/Part.html" class="linkConstructor">Part</a>s.</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>}</span> </dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
                    </tbody>
                </table>
                </div><!-- class="table-responsive">-->
                

                
                <dl class="inheritsList">
                <dt>Methods borrowed from class <a href="../symbols/Layout.html" class="linkConstructor">Layout</a>: </dt><dd><a href="../symbols/Layout.html#cloneProtected" class="linkMethod">cloneProtected</a>, <a href="../symbols/Layout.html#copy" class="linkMethod">copy</a>, <a href="../symbols/Layout.html#invalidateLayout" class="linkMethod">invalidateLayout</a>, <a href="../symbols/Layout.html#updateParts" class="linkMethod">updateParts</a></dd>
                </dl>
                
            
<!-- ============================== events summary ======================== -->
            

<!-- ============================== fields summary ===================== -->
            
                
                
                <h2 class="summaryCaption">Constants<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
                <div class="table-responsive">
                <table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class TreeLayout.">
                    <thead>
                        <tr>
                            <th scope="col" class="name">Name</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                    
                        <tr id="AlignmentBottomRightBus">
                            <td class="name">
                                <div class="name">
                                AlignmentBottomRightBus
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>The children are positioned in a bus, only on the bottom or right side of the parent;This value is used for <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">TreeLayout.alignment</a> or <a href="../symbols/TreeLayout.html#alternateAlignment" class="linkProperty">TreeLayout.alternateAlignment</a>;A bus does not take <a href="../symbols/TreeVertex.html#breadthLimit" class="linkProperty">TreeVertex.breadthLimit</a> into account.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="AlignmentBus">
                            <td class="name">
                                <div class="name">
                                AlignmentBus
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>The children are positioned in a bus on both sides of an "aisle" where the links to them go,with the last odd child (if any) placed at the end of the aisle in the middle;The children, if they are themselves parents, continue at the same inherited angle;use <a href="../symbols/TreeLayout.html#AlignmentBusBranching" class="linkConstant">TreeLayout.AlignmentBusBranching</a> if you want grandchildren to proceed growing inthe different angle as determined by the side;This value is used for <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">TreeLayout.alignment</a> or <a href="../symbols/TreeLayout.html#alternateAlignment" class="linkProperty">TreeLayout.alternateAlignment</a>.<span class="nodetails" id="xfldAlignmentBus"><a class="morelink" onclick="hst('fldAlignmentBus')">More...</a></span> <span class="details" id="fldAlignmentBus">A bus does not take <a href="../symbols/TreeVertex.html#breadthLimit" class="linkProperty">TreeVertex.breadthLimit</a> into account.</span>
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="AlignmentBusBranching">
                            <td class="name">
                                <div class="name">
                                AlignmentBusBranching
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Like <a href="../symbols/TreeLayout.html#AlignmentBus" class="linkConstant">TreeLayout.AlignmentBus</a> with the children arranged on both sides of an "aisle"with any last odd child placed at the end of the aisle,but the children get an <a href="../symbols/TreeVertex.html#angle" class="linkProperty">TreeVertex.angle</a> that depends on which side of the aislethey were placed;This only works well when the <a href="../symbols/TreeLayout.html#treeStyle" class="linkProperty">TreeLayout.treeStyle</a> is <a href="../symbols/TreeLayout.html#StyleLayered" class="linkConstant">TreeLayout.StyleLayered</a>;This value is used for <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">TreeLayout.alignment</a> or <a href="../symbols/TreeLayout.html#alternateAlignment" class="linkProperty">TreeLayout.alternateAlignment</a>;A bus does not take <a href="../symbols/TreeVertex.html#breadthLimit" class="linkProperty">TreeVertex.breadthLimit</a> into account.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="AlignmentCenterChildren">
                            <td class="name">
                                <div class="name">
                                AlignmentCenterChildren
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>The parent is centered at the middle of the range of its immediate child nodes;This value is used for <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">TreeLayout.alignment</a> or <a href="../symbols/TreeLayout.html#alternateAlignment" class="linkProperty">TreeLayout.alternateAlignment</a>;When there is a breadth limit that causes there to be multiple rows,the links that extend from the parent to those children in rows pastthe first one may cross over the nodes that are in earlier rows.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="AlignmentCenterSubtrees">
                            <td class="name">
                                <div class="name">
                                AlignmentCenterSubtrees
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>The parent is centered at the middle of the range of its child subtrees;This value is used for <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">TreeLayout.alignment</a> or <a href="../symbols/TreeLayout.html#alternateAlignment" class="linkProperty">TreeLayout.alternateAlignment</a>;When there is a breadth limit that causes there to be multiple rows,the links that extend from the parent to those children in rows pastthe first one may cross over the nodes that are in earlier rows.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="AlignmentEnd">
                            <td class="name">
                                <div class="name">
                                AlignmentEnd
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>The parent is positioned near the last of its children;This value is used for <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">TreeLayout.alignment</a> or <a href="../symbols/TreeLayout.html#alternateAlignment" class="linkProperty">TreeLayout.alternateAlignment</a>.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="AlignmentStart">
                            <td class="name">
                                <div class="name">
                                AlignmentStart
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>The parent is positioned near the first of its children;This value is used for <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">TreeLayout.alignment</a> or <a href="../symbols/TreeLayout.html#alternateAlignment" class="linkProperty">TreeLayout.alternateAlignment</a>.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="AlignmentTopLeftBus">
                            <td class="name">
                                <div class="name">
                                AlignmentTopLeftBus
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>The children are positioned in a bus, only on the top or left side of the parent;This value is used for <a href="../symbols/TreeLayout.html#alignment" class="linkProperty">TreeLayout.alignment</a> or <a href="../symbols/TreeLayout.html#alternateAlignment" class="linkProperty">TreeLayout.alternateAlignment</a>;A bus does not take <a href="../symbols/TreeVertex.html#breadthLimit" class="linkProperty">TreeVertex.breadthLimit</a> into account.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="ArrangementFixedRoots">
                            <td class="name">
                                <div class="name">
                                ArrangementFixedRoots
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Do not move each root node, but position all of their descendants relative to their root;This value is used for <a href="../symbols/TreeLayout.html#arrangement" class="linkProperty">TreeLayout.arrangement</a>.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="ArrangementHorizontal">
                            <td class="name">
                                <div class="name">
                                ArrangementHorizontal
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Position each tree in a non-overlapping fashion by increasing X coordinates,starting at the <a href="../symbols/Layout.html#arrangementOrigin" class="linkProperty">Layout.arrangementOrigin</a>;This value is used for <a href="../symbols/TreeLayout.html#arrangement" class="linkProperty">TreeLayout.arrangement</a>.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="ArrangementVertical">
                            <td class="name">
                                <div class="name">
                                ArrangementVertical
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Position each tree in a non-overlapping fashion by increasing Y coordinates,starting at the <a href="../symbols/Layout.html#arrangementOrigin" class="linkProperty">Layout.arrangementOrigin</a>;This value is used for <a href="../symbols/TreeLayout.html#arrangement" class="linkProperty">TreeLayout.arrangement</a>.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="CompactionBlock">
                            <td class="name">
                                <div class="name">
                                CompactionBlock
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>A simple fitting of subtrees;This value is used for <a href="../symbols/TreeLayout.html#compaction" class="linkProperty">TreeLayout.compaction</a> or <a href="../symbols/TreeLayout.html#alternateCompaction" class="linkProperty">TreeLayout.alternateCompaction</a>;This mode produces more compact trees -- often nicer looking too;Nodes will not overlap each other, unless you have negative valuesfor some of the spacing properties;However it is possible when the links are orthogonally styled thatoccasionally the subtrees will be placed so close together that somelinks may overlap the links or even the nodes of other subtrees.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="CompactionNone">
                            <td class="name">
                                <div class="name">
                                CompactionNone
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Only simple placement of children next to each other, as determined by their subtree breadth;This value is used for <a href="../symbols/TreeLayout.html#compaction" class="linkProperty">TreeLayout.compaction</a> or <a href="../symbols/TreeLayout.html#alternateCompaction" class="linkProperty">TreeLayout.alternateCompaction</a>;For any node, there will not be another node at any depth occupying the same breadth position,unless there are multiple rows;  In other words, if there is no breadth limit resulting inmultiple rows, with this compaction mode it is as if every node were infinitely deep.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="LayerIndividual">
                            <td class="name">
                                <div class="name">
                                LayerIndividual
                                
                                    <span class="since" title="since">1.4</span>
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>The normal layer style, where each node takes up only the depth that it needs;this value is used for <a href="../symbols/TreeLayout.html#layerStyle" class="linkProperty">TreeLayout.layerStyle</a>.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="LayerSiblings">
                            <td class="name">
                                <div class="name">
                                LayerSiblings
                                
                                    <span class="since" title="since">1.4</span>
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>A layer style where all of the children of a parent node take up the same amount of depth --this typically causes all cousins to be aligned;this value is used for <a href="../symbols/TreeLayout.html#layerStyle" class="linkProperty">TreeLayout.layerStyle</a>.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="LayerUniform">
                            <td class="name">
                                <div class="name">
                                LayerUniform
                                
                                    <span class="since" title="since">1.4</span>
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>A layer style where all nodes with the same <a href="../symbols/TreeVertex.html#level" class="linkProperty">TreeVertex.level</a> throughout the tree take up the same amount of depth --if the <a href="../symbols/TreeVertex.html#angle" class="linkProperty">TreeVertex.angle</a> is the same for all nodes, this will result in all nodes in the same layer to be aligned;this value is used for <a href="../symbols/TreeLayout.html#layerStyle" class="linkProperty">TreeLayout.layerStyle</a>.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="PathDefault">
                            <td class="name">
                                <div class="name">
                                PathDefault
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This value for <a href="../symbols/TreeLayout.html#path" class="linkProperty">TreeLayout.path</a> causes the value of <a href="../symbols/Diagram.html#isTreePathToChildren" class="linkProperty">Diagram.isTreePathToChildren</a>to effectively choose either <a href="../symbols/TreeLayout.html#PathDestination" class="linkConstant">TreeLayout.PathDestination</a> (if true) or <a href="../symbols/TreeLayout.html#PathSource" class="linkConstant">TreeLayout.PathSource</a> (if false).
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="PathDestination">
                            <td class="name">
                                <div class="name">
                                PathDestination
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>The children of a <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> are its <a href="../symbols/LayoutVertex.html#destinationVertexes" class="linkProperty">LayoutVertex.destinationVertexes</a>,the collection of connected <a href="../symbols/LayoutEdge.html#toVertex" class="linkProperty">LayoutEdge.toVertex</a>es;This value is used for <a href="../symbols/TreeLayout.html#path" class="linkProperty">TreeLayout.path</a>;The tree roots are those <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>es that have zero source edges}.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="PathSource">
                            <td class="name">
                                <div class="name">
                                PathSource
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>The children of a <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> are its <a href="../symbols/LayoutVertex.html#sourceVertexes" class="linkProperty">LayoutVertex.sourceVertexes</a>,the collection of connected <a href="../symbols/LayoutEdge.html#fromVertex" class="linkProperty">LayoutEdge.fromVertex</a>es;This value is used for <a href="../symbols/TreeLayout.html#path" class="linkProperty">TreeLayout.path</a>;The tree roots are those <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>es that have zero destination edges.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="SortingAscending">
                            <td class="name">
                                <div class="name">
                                SortingAscending
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Lay out each child according to the sort order given by <a href="../symbols/TreeVertex.html#comparer" class="linkProperty">TreeVertex.comparer</a>;This value is used for <a href="../symbols/TreeLayout.html#sorting" class="linkProperty">TreeLayout.sorting</a> or <a href="../symbols/TreeLayout.html#alternateSorting" class="linkProperty">TreeLayout.alternateSorting</a>.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="SortingDescending">
                            <td class="name">
                                <div class="name">
                                SortingDescending
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Lay out each child in reverse sort order given by <a href="../symbols/TreeVertex.html#comparer" class="linkProperty">TreeVertex.comparer</a>;This value is used for <a href="../symbols/TreeLayout.html#sorting" class="linkProperty">TreeLayout.sorting</a> or <a href="../symbols/TreeLayout.html#alternateSorting" class="linkProperty">TreeLayout.alternateSorting</a>.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="SortingForwards">
                            <td class="name">
                                <div class="name">
                                SortingForwards
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Lay out each child in the order in which they were found;This value is used for <a href="../symbols/TreeLayout.html#sorting" class="linkProperty">TreeLayout.sorting</a> or <a href="../symbols/TreeLayout.html#alternateSorting" class="linkProperty">TreeLayout.alternateSorting</a>.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="SortingReverse">
                            <td class="name">
                                <div class="name">
                                SortingReverse
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Lay out each child in reverse order from which they were found;This value is used for <a href="../symbols/TreeLayout.html#sorting" class="linkProperty">TreeLayout.sorting</a> or <a href="../symbols/TreeLayout.html#alternateSorting" class="linkProperty">TreeLayout.alternateSorting</a>.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="StyleAlternating">
                            <td class="name">
                                <div class="name">
                                StyleAlternating
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Alternate layers of the tree have different properties, typically including the angle;This value is used for <a href="../symbols/TreeLayout.html#treeStyle" class="linkProperty">TreeLayout.treeStyle</a>;Each <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> gets its properties from its grandparent node;The root nodes get their defaults from <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">TreeLayout.rootDefaults</a>;the immediate children of root nodes get their defaults from <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">TreeLayout.alternateDefaults</a>;Depending on the properties used, it is possible for some link routes to cross over nodes.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="StyleLastParents">
                            <td class="name">
                                <div class="name">
                                StyleLastParents
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Just like the standard layered tree style, except that the nodes with children but no grandchildrenhave alternate properties;This value is used for <a href="../symbols/TreeLayout.html#treeStyle" class="linkProperty">TreeLayout.treeStyle</a>;Each <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> gets its properties from its parent node;However, for those nodes whose <a href="../symbols/TreeVertex.html#maxGenerationCount" class="linkProperty">TreeVertex.maxGenerationCount</a> is 1,in other words when it has children but no grandchildren,the properties are copied from <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">TreeLayout.alternateDefaults</a>;If the tree only has two levels, the root node gets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">TreeLayout.rootDefaults</a>.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="StyleLayered">
                            <td class="name">
                                <div class="name">
                                StyleLayered
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>The normal tree style, where all of the children of each <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> are lined uphorizontally or vertically;This value is used for <a href="../symbols/TreeLayout.html#treeStyle" class="linkProperty">TreeLayout.treeStyle</a>;Each <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> gets its properties from its parent node;<a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">TreeLayout.rootDefaults</a> is used for all default <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> property values;<a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">TreeLayout.alternateDefaults</a> is ignored.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="StyleRootOnly">
                            <td class="name">
                                <div class="name">
                                StyleRootOnly
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>All of the nodes get the alternate properties, except the root node gets the default properties;This value is used for <a href="../symbols/TreeLayout.html#treeStyle" class="linkProperty">TreeLayout.treeStyle</a>;The root node gets the <a href="../symbols/TreeLayout.html#rootDefaults" class="linkProperty">TreeLayout.rootDefaults</a> properties,the root node's children get the <a href="../symbols/TreeLayout.html#alternateDefaults" class="linkProperty">TreeLayout.alternateDefaults</a> properties,and all the rest of the <a href="../symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>es get their properties from their parent node.
                            

                </div>
                            </td>
                        </tr>
                    
                    </tbody>
                </table>
                </div><!-- class="table-responsive">-->
                

            

<!-- ============================== constructor details ==================== -->

        </div> <!-- end contentBody -->
    </div> <!-- end row -->
    </div> <!-- end container-fluid -->

<!-- ============================== footer ================================= -->
        <div id="footer" class="fineprint" style="clear:both">
            Copyright &copy; 1998-2016 by <a href="https://www.nwoods.com/">Northwoods Software Corporation.</a>
        </div>
    </body>
</html>
